<template>
	<swiper class="swiper" :indicator-dots="true">
		<swiper-item class="swiper-item" v-for="item in categoryList" :key="item">
			<div class="grid-box">
				<view class="grid-item" v-for="cateList in item" :key="cateList" @tap="goGoodsList(cateList)">
					<image :src="cateList.pic" class="img" />
					<view class="text"> {{ cateList.title }} </view>
				</view>
			</div>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
  import { useMiddleWare } from '@/store'
	import { GetHomeCategoryApi } from '@/service/index.js'
	const categoryList = ref([])
	const goGoodsList = (category) => {
    if(category.id == 'more') return
		uni.navigateTo({
			url: `/pages/goodsList/goodsList?id=${category.id}&title=${category.title}`
		})
	}
	const getCategoryList = () => {
    const { setCategory } = useMiddleWare()
		GetHomeCategoryApi().then(res => {
      setCategory(1, res.data)
      categoryList.value = spArr(res.data)
		})
	}
  function spArr(arr) { //arr是你要分割的数组，num是以几个为一组
  	let newArr = [] //首先创建一个新的空数组。用来存放分割好的数组
  	for (let i = 0; i < arr.length;) { //注意：这里与for循环不太一样的是，没有i++
  		newArr.push(arr.slice(i, i += 15));
  	}
  	return newArr
  }
	onLoad(() => {
		getCategoryList()
	})
</script>

<style scoped lang="scss">
	.swiper {
		min-height: 258px;
		.swiper-item {
			padding: 0 12px;
			box-sizing: border-box;
			.grid-box {
				width: 100%;
				height: 100%;
				background-color: #fff;
				border-radius: 10px;
				padding: 10px;
				display: grid;
				grid-template-columns: repeat(5, 1fr); /* 创建5列 */
				grid-template-rows: repeat(3, 1fr); /* 创建5列 */
				gap: 9px 16px; /* 如果需要间距，可以设置为非零值 */
				box-sizing: border-box; /* 确保内边距不会增加容器大小 */
				.grid-item {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					flex-direction: column;
					.img {
						width: 100rpx;
            height: 100rpx;
						margin-bottom: 3px;
						border-radius: 50%;
					}
					.text {
						width: 48px;
						height: 13px;
						color: #333333;
						font-size: 12px;
						font-weight: 400;
						line-height: 14px;
						text-align: center;
					}
				}
			}
		}
	}
</style>